<template>
  <div class="app-container">
    <div class="openSearch" @click="container=!container">
      <span>搜索/筛选借款</span>
      <span :class="{opencolor:container}">[{{container?"隐藏":"展开"}}]</span>
    </div>
    <div class="filter-container" v-if="container">
      <el-row style="padding-bottom:10px;">
        <span>开始日期</span>
        <el-date-picker
          v-model="params['startDate']"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择开始时间"
        ></el-date-picker>
      </el-row>
      <el-row style="padding-bottom:10px;">
        <span>截止日期</span>
        <el-date-picker
          v-model="params['endDate']"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择开始时间"
        ></el-date-picker>
      </el-row>
      <el-row style="padding-top:10px">
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </el-row>
    </div>

    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="id" align="center" label="Id" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="versionNo" align="center" label="版本号" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.versionNo}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="versionDesc" align="center" label="版本描述" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.versionDesc}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="systemType" align="center" label="app类型" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.systemType}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="appUrl" align="center" label="app路径" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.appUrl}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="useStatus" align="center" label="是否使用" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.useStatus | statusType}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editRow(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="版本号" prop="versionNo">
          <el-input v-model="temp.versionNo" maxlength="50" placeholder="版本号" style="width:300px;"></el-input>
        </el-form-item>

        <el-form-item label="版本描述" prop="versionDesc">
          <el-input v-model="temp.versionDesc" placeholder="版本描述" style="width:500px;"></el-input>
        </el-form-item>

        <el-form-item label="app类型" prop="systemType">
          <el-input v-model="temp.systemType" placeholder="app类型" style="width:500px;"></el-input>
        </el-form-item>

        <el-form-item label="app路径" prop="appUrl">
          <el-input v-model="temp.appUrl" placeholder="app路径" style="width:500px;"></el-input>
        </el-form-item>

        <el-form-item label="是否使用" prop="useStatus">
          <el-radio-group v-model="temp.useStatus">
            <el-radio
              v-for="(item,value) in status"
              :key="value"
              :label="value"
              :value="value"
            >{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
let status = ["否", "是"];
export default {
  data() {
    return {
      tableHeight: 400,
      total: 0,
      status: status,
      container: false,
      list: [],
      params: {
        pageNo: 1,
        pageSize: 20
      },
      temp: {
        title: "",
        subjectName: "",
        url: "",
        type: "",
        sort: "",
        status: "",
        coverImg: ""
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      cityIdOptions: [],
      rules: {
        versionNo: [
          {
            required: true,
            message: "版本号",
            trigger: "change",
            max: 50
          }
        ],
        versionDesc: [
          { required: true, message: "版本描述", trigger: "change" }
        ],
        appUrl: [
          { required: true, message: "app路径不能为空", trigger: "change" }
        ],
        useStatus: [{ required: true, message: "是否使用不能为空", trigger: "change" }],
        systemType: [{ required: true, message: "app类型不能为空", trigger: "change" }]
      }
    };
  },
  created() {
    this.loadData();
    this.tableHeight = window.innerHeight - 300;
  },
  filters: {
    statusType(item) {
      return status[parseInt(item)];
    }
  },
  methods: {
    handleFilter() {
      this.loadData();
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleDelete(row) {
      this.$confirm("确定删除该版本吗?", "提示").then(_ => {
        this.$post("/admin/app_version/delete", {
          id: row.id
        }).then(data => {
          this.loadData();
        });
      });
    },
    editRow(row) {
      this.dialogFormVisible = true;
      this.isEditing = true;
      this.temp = Object.assign({}, row);
    },
    submitFormAction() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const postData = Object.assign({}, this.temp);
          let url = "";
          if (this.isEditing) {
            url = "/admin/app_version/modify";
          }
          this.$post(url, postData)
            .then(data => {
              this.loadData();
              this.$$notify("操作成功");
              this.dialogFormVisible = false;
              this.temp = {};
            })
            .finally(_ => {
              this.submiting = false;
            });
        }
      });
    },
    loadData() {
      this.$post("/admin/app_version/list", this.params)
        .then(data => {
          this.list = data.dataList;
        })
        .catch(_ => {
          console.log("Err", _);
        });
    }
  }
};
</script>

<style scoped>
.avatar-uploader {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar-uploader-icon {
  width: 375px;
  height: 155px;
}
.img-src {
  height: 100px;
}
</style>
